<template>
  <!-- 需求计划 -->
  <div id="purchase" @scroll="scrollFoot">
    <span class="quotation"  @click="$router.push('/viewHistoricalQuote')">查看历史报价</span>
    <div class="top">
      <van-nav-bar
        title="选择报价单"
        left-arrow
        @click-left="$router.push('/')"
      />
      
    </div>

    <div class="search">
      <van-cell-group>
        <van-field v-model="searchValue" placeholder="请输入搜索内容" />
      </van-cell-group>
      <img @click="search" src="../../assets/images/search.png" alt="" />
    </div>

    <div class="nothing" v-show="list.length == 0">
      <p>暂无数据</p>
    </div>
    <div class="item" v-for="(item, index) in list" :key="index">
      <p class="title">
        {{ item.enquiryName }}
        <span class="noQuotation" :class="item.quoteState == '1' ? 'noPay' : ''">{{ item.quoteState == '1'? '未报价':'已报价' }}</span>
      </p>
      <p>询价发布编码：{{ item.code }}</p>
      <p>截止时间：{{ item.date }}</p>
      <p style="color: red">询价发布人：{{ item.publisher}}</p>

      <div @click="inDetail(item.id,item.quoteState)" class="details">
        <p>物资明细</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import api from "../../http/api";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 100,
      total: null,
      scrollTime: null,
      // 搜索内容
      searchValue: "",
      // 列表数据
      /*list: [
          {
              "date": "2023-05-13",
              "enquiryName": "测试-05询价",
              "code": "WTBH-2022082500001",
              "publisher": "null",
              "id": "-2444136893417176056",
              "quoteState": "1"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试-05-003",
              "code": "WTBH-2022082500003",
              "publisher": "null",
              "id": "303956680476674363",
              "quoteState": "1"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "10月物资储备询价",
              "code": "WTBH-2022082200003",
              "publisher": "null",
              "id": "1744883612356920779",
              "quoteState": "1"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试测试",
              "code": "WTBH-2022090700001",
              "publisher": "null",
              "id": "2644252361616673201",
              "quoteState": "1"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试-05询价-2",
              "code": "WTBH-2022082500002",
              "publisher": "null",
              "id": "6717861985574603615",
              "quoteState": "1"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924859",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924858",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924857",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924856",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924855",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924854",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924853",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924852",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试22222222",
              "code": "WTBH-2022090700003",
              "publisher": "null",
              "id": "-4703847705842924851",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "测试1111111",
              "code": "WTBH-2022090700004",
              "publisher": "null",
              "id": "-2431026441190947384",
              "quoteState": "0"
          },
          {
              "date": "2023-05-13",
              "enquiryName": "8月27询价",
              "code": "WTBH-2022082700001",
              "publisher": "null",
              "id": "268991293930356808",
              "quoteState": "0"
          }
      ],*/
        list:[],
    };
  },

  mounted() {
    this.getList({
      //上线用
      loginPhone: localStorage.phone,//电话号码
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      query: this.searchValue,
      // loginPhone: "15181798337",//电话号码
    });
  },
  methods: {
    // 滚动条触底事件
    scrollFoot(e) {
      // 获取需要绑定的dom事件对象
      const dom = e.target;
      dom.addEventListener("scroll", () => {
        // 简易节流
        if (this.scrollTime) {
          return;
        } else {
          // 滚动高度+可视区域高度=滚动的高度
          if (
            Math.ceil(dom.scrollTop + dom.clientHeight) === dom.scrollHeight
          ) {
            console.log("触底了");
            // 触底后需要操作的事件
            this.pageNum++;
            if (this.total > this.list.length) {
              Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
              });
              api.purchase
                .getList({
                  // loginPhone: "15181798337",//电话号码
                  loginPhone: localStorage.phone,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  query: this.searchValue,
                })
                .then((res) => {
                  Toast.clear();
                  console.log(res);
                  if (res.data.code == 200) {
                    this.list.push(...res.data.data.rows);
                  }
                });
            }

            // 在数据渲染完毕后延迟执行 让滚动条保持在加载的位置
            this.$nextTick(() => {
              dom.scrollTop = dom.scrollTop;
            });
            this.scrollTime = setTimeout(() => {
              clearTimeout(this.scrollTime);
              this.scrollTime = null;
            }, 200);
          }
        }
      });
    },
    /**
     * 搜索内容
     */
    search() {
      this.pageNum = 1;
      this.getList({
        loginPhone: localStorage.phone,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        query: this.searchValue,
      });
    },
    // 获取内容
    getList(data) {
      api.purchase.getList(data).then((res) => {
          console.log("选择报价单 >>: ",res)
        if (res.data.code == 200) {
          this.list = res.data.data.rows;
          this.total = res.data.data.total;
        }
      });
    },
    // 进入详情页面
    inDetail(id,quoteState) {
      this.$router.push({
        path: "/purchaseDetails",
        query: { id ,quoteState},
      });
    },
  },
};
</script>

<style lang="less" scoped>
#purchase {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  padding-top: 51px;
  overflow: scroll;
  box-sizing: border-box;
  position: relative;
  .quotation{
      font-size: 13px;
      position: absolute;
      right: 16px;
      top: 17px;
      z-index: 99;
      cursor: pointer;
    }
  .nothing {
    color: #333;
    text-align: center;
    font-size: 16px;
  }
  .top {
    position: fixed;
    width: 100%;
    top: 0;
    overflow: hidden;
    background-color: white;
    z-index: 1;
    
  }
  .search {
    margin: 8px 10px;
    height: 33px;
    background: #ffffff;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    /deep/ .van-cell-group {
      min-width: 80%;
    }
    img {
      width: 22px;
      height: 22px;
      margin: 5px 20px 5px 10px;
    }
  }

  .item {
    position: relative;
    margin: 8px 10px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 16px 20px;
    overflow: hidden;
    .title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 19px;
      margin-bottom: 12px;
      color: #333333;
      position: relative;
      .noQuotation{
        position: absolute;
        right: 0;
        font-size: 14px;
      }
      .noPay{
        color: red;
      }
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      // span{
      //   color: red;
      // }
    }
    p {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 23px;
      color: #666666;
      margin: 0;
    }
    .details {
      position: absolute;
      right: 15px;
      bottom: 13px;
      background: rgba(14, 134, 209, 0.2);
      border: 1px solid #0e86d1;
      border-radius: 5px;
      font-family: "ABeeZee";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 23px;
      padding: 0 4px;
      /* identical to box height, or 143% */

      text-align: center;
      letter-spacing: -0.24px;
      z-index: 1;
      p {
        color: #0e86d1;
      }
    }
  }
}
/deep/ .van-nav-bar__left {
  padding: 10px;
}
/deep/ .van-ellipsis {
  overflow: visible;
}
/deep/ .van-nav-bar__content {
  height: 51px;
}
/deep/ .van-nav-bar__title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  /* identical to box height, or 111% */

  text-align: center;
  letter-spacing: -0.24px;

  color: #333333;
}
/deep/ .van-nav-bar .van-icon {
  /* 文字颜色3 */

  color: #999999;
}
/deep/ .van-cell {
  padding: 0 10px;
  line-height: 33px;
}
</style>
